<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import logo from '@/assets/icon/public/logo_full.png'
import USDT from '@/assets/icon/public/USDT.png'
import BTC from '@/assets/icon/public/BTC.png'
const router = useRouter()

const imgs = ref([
  USDT,
  BTC,
  logo
])
// deposit
const toDeposit = () => {
  router.push({
    path: '/deposit'
  })
}
</script>
<template>
  <div class="container flex flex-col items-center gap-30px">
    <div class="py-26px px-30px rounded-[30px] bg-[#282828] w-100%" v-for="(item, index) in 10" :key="index" @click="toDeposit">
      <div class="flex items-center justify-between">
        <div
          class="bg-[#F76938] rounded-[555px] py-10 px-40 text-[26px] text-[#fff] font-roboto font-700 line-height-30px">
          Type {{ index + 1 }}</div>
        <div class="flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 31" fill="none">
            <path
              d="M17.4292 15.5208L2.74167 0.833328L0 3.57499L11.9458 15.5208L0 27.4667L2.74167 30.2083L17.4292 15.5208ZM31.1375 15.5208L16.6458 0.833328L13.7083 3.57499L25.6542 15.5208L13.7083 27.4667L16.45 30.2083L31.1375 15.5208Z"
              fill="#D9D9D9" />
          </svg>
        </div>
      </div>
      <div class="flex items-center justify-between mt-30px">
        <div>
          <div class=" text-[#AEB8B7] text-[24px] font-roboto font-400">累计收益(X)</div>
          <div class="mt-14px text-[#fff] text-[50px] font-roboto font-800">27.509</div>
        </div>
        <div class="flex items-center">
          <div :class="[index == 0 ? '' : 'ml-[-26px]']" v-for="(img, index) in imgs" :key="index">
            <img :src="img" class="w-60 h-60" />
          </div>
        </div>

      </div>
      <div class="flex items-center justify-between mt-30px">
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <img src="/src/assets/icon/mining/coin.png" class="w-36 h-36" />
            <div class="text-[#FFFFFF] text-[30px] font-roboto font-800 line-height-28px ml-4px">300</div>
          </div>
          <div class="text-[#AEB8B7] text-[24px] font-pingfang font-400 line-height-42px mt-10px">价格/U</div>
        </div>
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <img src="/src/assets/icon/mining/electricity.png" class="w-36 h-36" />
            <div class="text-[#FFFFFF] text-[30px] font-roboto font-800 line-height-28px ml-4px">1.5</div>
          </div>
          <div class="text-[#AEB8B7] text-[24px] font-pingfang font-400 line-height-42px mt-10px">算力/倍</div>
        </div>
        <div class="flex flex-col items-center">
          <div class="flex items-center">
            <img src="/src/assets/icon/mining/trophy.png" class="w-36 h-36" />
            <div class="text-[#FFFFFF] text-[30px] font-roboto font-800 line-height-28px ml-4px">300</div>
          </div>
          <div class="text-[#AEB8B7] text-[24px] font-pingfang font-400 line-height-42px mt-10px">周期/天</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
}
</style>